<template>
    <img v-right="'traffic'" id="toggle1" src="~images/矢量.png" @click="handleVec" />
    <img id="toggle2" src="~images/影像.png" @click="handleImg" />
    <div  id="map">
        <div id="mouse-position">
        </div>
    </div>
</template>
<script setup>
import { initMap } from 'hooks/initMap'
import { nextTick, onMounted } from 'vue';
import { addControl } from 'hooks/mapControl.js'
/* 初始化地图 */
onMounted(
    initMap(),
    nextTick(() => {
        /* 加载控件 */
        addControl()
    })
)
function handleVec() {
    tdImgLayergroup.setVisible(false);
}
function handleImg() {
    tdImgLayergroup.setVisible(true);
}
</script>
<style lang="scss" scoped>
#map {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
}

/* 鼠标位置控件层样式设置 */
#mouse-position {
    position: fixed;
    font-size: 18px;
    color: #00f76f;
    bottom: 1em;
    left: 10em;
    width: 200px;
    height: 20px;
    /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
    z-index: 2000;
}

img {
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 100px;
    height: 70px;
    z-index: 9999;
    border: 2px solid #409eff;
    box-shadow:2px 2px 10px #409eff;
}

#toggle1 {
    right: 130px;
}
</style>
<style >
.ol-overviewmap {
    position: absolute;
    bottom: 3em;
}

/* 鹰眼控件中显示当前窗口中主图区域的边框 */
.ol-custom-overviewmap .ol-overviewmap-box {
    border-color: red;
}

/* 鹰眼控件展开时其控件按钮图标的样式 */
.ol-custom-overviewmap:not(.ol-collapsed) button {
    bottom: 6px;
    left: 3px;

}

/* 无极放大控件 */
.ol-zoomslider {
    top: 25em;
    right: 1em;
    height: 200px;
    left: unset;
}

/* 复位 */
.ol-zoom-extent {
    top: 22em;
    right: 1em;
    left: unset;
}

/* 放大缩小 */
.ol-zoom {
    top: 17em;
    right: 1em;
    left: unset;
}
</style>